<template>
  <div class="enterprise-list">
    <div>
      <h5Pop
        ref="h5PopFrame"
        poptypes="shitang"
        :h5pop="isShowH5Pop"
        @cancel="isShowH5Pop = false"
      />
    </div>
    <div class="scroll-container" style="height: 100%; overflow-y: auto">
      <!-- 滚动内容 -->
      <div class="search-header flex">
        <div class="location" @click="openSelect()">
          <img
            class="location-img"
            mode="scaleToFill"
            src="@/assets/serviceList/location.png"
          >
          <div class="location-city">
            {{ city }}
          </div>
        </div>
        <div class="search-content">
          <van-search
            v-model="searchValue"
            class="search-input"
            shape="round"
            placeholder="搜索"
            fontsize="14px"
            @input="handleInput"
          />
        </div>
      </div>
      <div class="enterprise-list-header">
        <div v-show="historyCompany.length > 0" class="history-list">
          <div class="list-header1">历史选择</div>
          <div v-for="item in historyCompany" :key="item.appId">
            <div class="history-item" @click="onItemClick(item, 0, $event)">
              {{ item.name }}
            </div>
          </div>
        </div>
        <ul class="list-alphabet">
          <li
            v-for="(word, index) in alphabet"
            :key="index"
            class="item"
            @click="onAlphabetClick(word, index)"
          >
            {{ word }}
          </li>
        </ul>
        <div>
          <div class="canteen-new-right-list-nav">
            <div class="right-nav-wrap">
              <div
                v-for="(item, index) in tabs"
                :key="index"
                class="right-nav-wrap-list"
                @click="handleTabChange(item.value)"
              >
                <div
                  v-if="item.isSelect === true"
                  :class="'list-name-' + index"
                >
                  <span style="color: #02cb9f">{{ item.title }}</span>
                  <div class="right-nav-wrap-list-select" />
                </div>
                <div v-else :class="'list-name-' + index">
                  <span style="color: #999999">{{ item.title }}</span>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div v-if="sortList.length == 0" class="list-empty">
              <image mode="scaleToFill" src="@/assets/serviceList/empty.png" />
            </div>
            <div v-else>
              <div ref="cityList" class="city-list">
                <div
                  v-for="(item, index) in sortList"
                  :id="
                    item.letter == '#' ? 'city-special' : 'city-' + item.letter
                  "
                  :key="index"
                >
                  <div>
                    <div slot="header" class="city-header">
                      {{ item.letter }}
                    </div>
                    <div
                      v-for="(project, i) in item.data"
                      :key="i"
                      class="city-item"
                    >
                      <div @click="onItemClick(project, 1, $event)">
                        {{ project.name }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getCompanyList,
  getH5CompanyList,
  getH5CompanyListPay
} from '@/api/h5'
import h5Pop from '@/components/h5Pop/h5Pop'
import { getDeviceType, pySort } from '@/utils/util.js' // 导入工具类
import { Toast } from 'vant'

export default {
  components: {
    h5Pop
  },
  data() {
    return {
      selectValue: '', // 选择的值
      selectShow: false, // 是否显示级联组件
      historyCompany: [],
      searchValue: '',
      showVoice: false,
      city: '',
      cityCode: '',
      toView: '',
      scrollTop: 0,
      companyList: [],
      sortList: [],
      companyType: 0,
      isloading: false,
      tabs: [
        {
          title: '全部',
          value: '0'
        },
        {
          title: '政府',
          value: '1'
        },
        {
          title: '企业',
          value: '2'
        },
        {
          title: '学校',
          value: '3'
        },
        {
          title: '医院',
          value: '4'
        },
        {
          title: '金融',
          value: '5'
        },
        {
          title: '养老',
          value: '7'
        },
        {
          title: '其他',
          value: '6'
        }
      ],
      alphabet: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z',
        '#'
      ],
      isShowH5Pop: false, // 是否展示H5 pop弹框
      os: {},
      deviceType: '',
      userCurrentCanteen: {}
    }
  },
  created() {
    Toast.loading({
      duration: 0, // 持续展示 toast
      message: '处理中...'
    })
    if (window.AlipayJSBridge) {
      window.AlipayJSBridge.call('setTitle', {
        title: '智慧食堂列表'
      })
    } else {
      document.addEventListener(
        'AlipayJSBridgeReady',
        () => {
          window.AlipayJSBridge.call('setTitle', {
            title: '智慧食堂列表'
          })
        },
        false
      )
    }
    this.tabs.map((item) => {
      item.isSelect = false
    })
    this.tabs[0].isSelect = true
    this.companyType = 0
    const historyCompanyList = JSON.parse(
      localStorage.getItem('historyCompany')
    )
    console.log(historyCompanyList)
    if (historyCompanyList) {
      // 清除历史记录中的空数据
      const oldHistory = historyCompanyList
      const newHistory = []
      for (let i = 0; i < oldHistory.length; i++) {
        if (oldHistory[i] != null) {
          newHistory.push(oldHistory[i])
        }
      }
      this.historyCompany = newHistory
      // 更新历史纪录
      localStorage.setItem(
        'historyCompany',
        JSON.stringify(this.historyCompany)
      )
    }
    this.deviceType = getDeviceType()
    const globalData = JSON.parse(localStorage.getItem('cityInfo'))
    console.log(globalData, 'globalData')
    if (globalData) {
      // 手动选择过 率先使用
      this.city = globalData.city
      this.cityCode = globalData.cityCode
      this.getCompanyList()
    } else {
      this.city = '开启定位'
      this.getLocationJSAPINew()
    }
  },
  mounted() {
    window.addEventListener('pageshow', this.handlePageShow)
    document.addEventListener('visibilitychange', this.handleVisibilityChange)
    this.isShowH5Pop = false
    if (window && window.AlipayJSBridge) {
      const _this = this
      AlipayJSBridge.call('setOptionMenu', {
        icon: 'iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAUKADAAQAAAABAAAAUAAAAAAx4ExPAAABn0lEQVR4Ae3XwW3CQBCFYdapwsecudkdRCmDW5IrFSW3lBHRgX2jhMhlODMWlvZiNE9ZS6z0r4Qwy2N2/YFhOBwYCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIlBRIWbHUdd17SunN5o63+es8z1/jOH7a4znL7nlY1T4WwL7vWxP5ttvLhszF5k/DMEwbzxeZrnEfjZ25I97DcxyH9Uz+ifX5kqPKfTzZZfthl+05IPHctu3vNE1jICtHat1Hc/vOC52wkg0VzEJKbSWbLRE6VGp71i/h9QcjsoCSjdTLM0ptJZuvETlWah8dkPEPAQe8Cq9XskLZJarUVrK77qPxPi+6gpKN1lxzSm0lu9aP3iu1PeutQ7L+68fuvVW5Ny7WB75aYK+Gusp9+CXsICe7ebO8NZZG2p7cC8/XrXIfeWNc1V+orXe64PyjeBQ8JUohgAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCDy+wB97bJ5UeONBvgAAAABJRU5ErkJggg=='
      })
      AlipayJSBridge.call('showOptionMenu')
      document.addEventListener(
        'optionMenu',
        function(e) {
          _this.isShowH5Pop = true
        },
        false
      )
    }
  },
  beforeDestroy() {
    window.removeEventListener('pageshow', this.handlePageShow)
  },
  methods: {
    async getCompanyList() {
      console.log(this.city, 'getCompanyList')
      const data = {
        name: this.searchValue,
        cityCode: this.cityCode,
        companyType: this.companyType
      }
      if (this.deviceType == 'HarmonyOS') {
        await getH5CompanyList(data)
          .then(async(res) => {
            if (res) {
              this.companyList = res
              this.sortList = pySort(this.companyList)
              Toast.clear()
            } else {
              await getH5CompanyListPay(data)
                .then((res) => {
                  this.companyList = res
                  this.sortList = pySort(this.companyList)
                  Toast.clear()
                })
                .catch((err) => {
                  Toast.clear()
                  Toast.loading({
                    duration: 1000 * 2,
                    message: '系统繁忙，请稍后再试'
                  })
                })
            }
          })
          .catch(async(err) => {
            Toast.clear()
            // 调用pay路径接口
            await getH5CompanyListPay(data)
              .then((res) => {
                this.companyList = res
                this.sortList = pySort(this.companyList)
                Toast.clear()
              })
              .catch((err) => {
                Toast.clear()
                Toast.loading({
                  duration: 1000 * 2,
                  message: '系统繁忙，请稍后再试'
                })
              })
          })
      } else {
        await getCompanyList(data)
          .then((res) => {
            this.companyList = res
            this.sortList = pySort(this.companyList)
            console.log(this.sortList, 'this.sortList')
            Toast.clear()
          })
          .catch((err) => {
            Toast.clear()
            Toast.loading({
              duration: 1000 * 2,
              message: '系统繁忙，请稍后再试'
            })
          })
      }
    },
    handleInput(searchValue) {
      this.searchValue = searchValue
      this.tabs.map((item) => {
        item.isSelect = false
      })
      this.tabs[0].isSelect = true
      this.companyType = 0

      // 埋点插件进行页面输入埋点
      // 萤火埋点
      if (window.sensors) {
        window.sensors.trackCustom({
          custom_type: 'firefly_input',
          firefly_ctm_page: '总行_食堂_列表页',
          firefly_ctm_area: '总行_食堂_列表页_搜索食堂',
          firefly_ctm_input: searchValue
        })
      }
      this.getCompanyList()
    },
    getLocationJSAPINew(isRetryLocationPermission = true) {
      const _this = this
      window.AlipayJSBridge &&
        window.AlipayJSBridge.call('location', {}, function(result) {
          const res = result
          // 获取用户当前位置省市信息
          if (res.error) {
            // 定位失败 获取定位信息 给默认城市
            _this.city = '开启定位'
            _this.cityCode = '110100'
            _this.getCompanyList()
            if (!isRetryLocationPermission || localStorage.getItem('locationPermission')) {
              // 定位失败且申请
              console.log('定位失败且申请')
            } else {
              _this.getLocation()
            }
          } else {
            // 定位成功
            let cityCode = Number(res.adCode)
            cityCode = parseInt(cityCode / 100) * 100
            _this.city = res.city
            _this.cityCode = cityCode
            localStorage.removeItem('locationPermission')
            _this.getCompanyList()
          }
        })
    },
    getLocation() {
      const _this = this
      if (window.AlipayJSBridge) {
        AlipayJSBridge.call('check_location_permission', function(result) {
          console.log(result, '获取hasLocationPermission')
          if (result.hasLocationPermission == 1) {
            // 有定位权限
            _this.getLocationJSAPINew(false)
          } else {
            // 没有定位权限
            // 定位失败 获取定位信息
            _this.getCompanyList()
            // 带城市信息
            localStorage.setItem('locationPermission', true)
            AlipayJSBridge.call(
              'request_location_permission',
              function(result) {
                if (
                  _this.deviceType == 'HarmonyOS' ||
                  _this.deviceType == 'Android'
                ) {
                  console.log(
                    result.requestPermissionResult,
                    'HarmonyOS_Android_requestLocationPermission'
                  )
                  if (result.requestPermissionResult == 'granted') {
                    _this.getLocationJSAPINew()
                  }
                } else {
                  console.log(
                    result.requestPermissionResult,
                    'IOS_requestLocationPermission'
                  )
                  if (
                    result.requestPermissionResult == 'already_have_permission'
                  ) {
                    _this.getLocationJSAPINew()
                  }
                }
              }
            )
          }
        })
      } else {
        console.log('no_window.AlipayJSBridge')
        // _this.getCompanyList()
      }
    },
    // 跳转服务商小程序
    async onItemClick(e, flag, event) {
      console.log(e, event.target)
      if (window.sensors) {
        window.sensors.quick('trackAllHeatMap', event.target, {
          $title: '总行_食堂_列表页',
          firefly_click_area: '总行_食堂_列表页_选择食堂',
          firefly_click_name: e.name,
          firefly_click_code: e.companyId
        })
        window.sensors.quick('trackAllHeatMap', event.target, {
          $title: '总行_食堂_列表页',
          firefly_click_area: '总行_食堂_列表页_选择食堂',
          firefly_click_name: '点击跳转总数统计',
          firefly_click_code: '点击跳转总数统计'
        })
        window.sensors.trackCustom({
              custom_type: 'firefly_exposure',
              firefly_ctm_page: '总行_食堂_食堂跳转',
              firefly_ctm_area: '总行_食堂_食堂跳转_跳转统计',
              firefly_ctm_prodName: '自动跳转和点击跳转总数统计'
            })
      }

      // 跳转服务商小程序
      if (flag == 0) {
        // 从历史记录点击进入
        let newData
        const searchParams = {
          name: e.name,
          cityCode: e.cityCode,
          companyType: e.companyType
        }
        if (this.deviceType == 'HarmonyOS') {
          await getH5CompanyList(searchParams)
            .then(async(res) => {
              if (res) {
                res.map((item) => {
                  if (item.companyId == e.companyId) {
                    localStorage.setItem(
                      'userCurrentCanteen',
                      JSON.stringify(item)
                    )
                    newData = item
                  }
                })
              } else {
                await getH5CompanyListPay(searchParams)
                  .then((res) => {
                    res.map((item) => {
                      if (item.companyId == e.companyId) {
                        localStorage.setItem(
                          'userCurrentCanteen',
                          JSON.stringify(item)
                        )
                        newData = item
                      }
                    })
                  })
                  .catch((err) => {
                    console.log(err)
                  })
              }
            })
            .catch(async(err) => {
              console.log(err)
              // 调用pay路径接口
              await getH5CompanyListPay(searchParams)
                .then((res) => {
                  res.map((item) => {
                    if (item.companyId == e.companyId) {
                      localStorage.setItem(
                        'userCurrentCanteen',
                        JSON.stringify(item)
                      )
                      newData = item
                    }
                  })
                })
                .catch((err) => {
                  console.log(err)
                })
            })
        } else {
          await getCompanyList(searchParams)
            .then((res) => {
              res.map((item) => {
                if (item.companyId == e.companyId) {
                  localStorage.setItem(
                    'userCurrentCanteen',
                    JSON.stringify(item)
                  )
                  newData = item
                }
              })
            })
            .catch((err) => {
              console.log(err)
            })
        }

        if (
          this.historyCompany.findIndex(
            (item) => item.companyId == newData.companyId
          ) == -1
        ) {
          this.historyCompany.unshift(newData)
        }
        console.log(this.historyCompany)
        if (this.historyCompany.length > 2) {
          this.historyCompany.pop()
        }
        localStorage.setItem(
          'historyCompany',
          JSON.stringify(this.historyCompany)
        )
        let chooseId
        if (this.deviceType == 'HarmonyOS') {
          chooseId = newData.harmonyOsAppId
        } else {
          chooseId = newData.appId
        }
        this.jumpTo(chooseId)
      } else {
        // 页面跳转
        if (
          this.historyCompany.findIndex(
            (item) => item.companyId == e.companyId
          ) == -1
        ) {
          this.historyCompany.unshift(e)
        }
        console.log(this.historyCompany)
        if (this.historyCompany.length > 2) {
          this.historyCompany.pop()
        }
        localStorage.setItem(
          'historyCompany',
          JSON.stringify(this.historyCompany)
        )
        const userCurrentCanteen = e
        localStorage.setItem(
          'userCurrentCanteen',
          JSON.stringify(userCurrentCanteen)
        )

        let chooseId
        if (this.deviceType == 'HarmonyOS') {
          chooseId = userCurrentCanteen.harmonyOsAppId
        } else {
          chooseId = userCurrentCanteen.appId
        }

        this.jumpTo(chooseId)
      }
    },
    jumpTo(chooseId) {
      if (chooseId.indexOf('http') == 0) {
        var params = {
          info: {
            url: chooseId // 要访问的目标商城地址
          }
        }
        window.AlipayJSBridge &&
          AlipayJSBridge.call('abcOpenNewH5App', params, function(data) {
            console.log('调用结果' + JSON.stringify(data))
          })
        // window.AlipayJSBridge && AlipayJSBridge.call('pushWindow', {
        //       'url':chooseId,
        //       'passData':{},
        //       'param':{}
        //      },function(response){
        //       console.log(response,'pushWindow返回')
        //      });
      } else {
        if (chooseId.indexOf('?') > 0) {
          // 有传参
          const cutIndex00 = chooseId.indexOf('?')
          const appId = chooseId.slice(0, cutIndex00)
          const datas = chooseId.slice(cutIndex00 + 1)
          const paramslineList = datas.split('&')
          const params = {}
          for (let i = 0; i < paramslineList.length; i++) {
            const cutIndex1 = paramslineList[i].indexOf('=')
            params[paramslineList[i].slice(0, cutIndex1)] = paramslineList[
              i
            ].slice(cutIndex1 + 1)
          }
          // 小程序链接
          if (window.AlipayJSBridge) {
            AlipayJSBridge.call(
              'startApp',
              {
                appId: appId,
                param: {
                  showProgress: 'NO',
                  backBehavior: 'back',
                  params: JSON.stringify(params)
                }
              },
              function(result) {
                console.log(result, 'result')
              }
            )
          } else {
            document.addEventListener(
              'AlipayJSBridgeReady',
              () => {
                AlipayJSBridge.call(
                  'startApp',
                  {
                    appId: appId,
                    param: {
                      showProgress: 'NO',
                      backBehavior: 'back',
                      params: JSON.stringify(params)
                    }
                  },
                  function(result) {
                    console.log(result, 'result')
                  }
                )
              },
              false
            )
          }
        } else {
          // 小程序链接
          if (window.AlipayJSBridge) {
            window.AlipayJSBridge.call(
              'startApp',
              {
                appId: chooseId,
                param: {
                  showProgress: 'NO',
                  backBehavior: 'back'
                }
              },
              function(result) {
                console.log(result, 'result')
              }
            )
          } else {
            document.addEventListener(
              'AlipayJSBridgeReady',
              () => {
                window.AlipayJSBridge.call(
                  'startApp',
                  {
                    appId: chooseId,
                    param: {
                      showProgress: 'NO',
                      backBehavior: 'back'
                    }
                  },
                  function(result) {
                    console.log(result, 'result')
                  }
                )
              },
              false
            )
          }
        }
      }
    },
    openSelect() {
      this.$router.push('/citySelect')
    },
    handleTabChange(index) {
      this.tabs.map((item) => {
        if (item.value == index) {
          item.isSelect = true
        } else {
          item.isSelect = false
        }
      })
      this.companyType = index
      this.changeCompanyType(index)
    },
    onAlphabetClick(item, index) {
      let word
      word = item
      if (item == '#') {
        word = 'special'
      }
      console.log(item, 'item')
      if (this.os.android) {
        // 获取目标元素
        const targetId = `city-${word}`
        const targetElement = this.$refs.cityList.querySelector(`#${targetId}`)
        if (!targetElement) return
        // 获取滚动容器，这里假设是最近的可滚动祖先或整个文档
        const scrollContainer =
          targetElement.closest('[style*="overflow-y: auto;"]') || window
        // 计算目标元素应该滚动到的位置
        const targetPosition =
          targetElement.getBoundingClientRect().top +
          scrollContainer.scrollTop -
          60
        // 如果scrollContainer是window，则直接使用scrollTo或scrollBy
        if (scrollContainer === window) {
          window.scrollTo({
            top: targetPosition,
            behavior: 'smooth' // 可选，如果需要平滑滚动
          })
        } else {
          // 如果scrollContainer是一个DOM元素，则设置其scrollTop
          scrollContainer.scrollTop = targetPosition
          // 如果想要平滑滚动效果，并且scrollContainer支持，你可能需要使用第三方库或自定义函数
          // 因为原生DOM元素的scrollTop不支持平滑滚动
        }
      } else {
        const targetId = `city-${word}`
        const target = this.$refs.cityList.querySelector(`#${targetId}`)
        if (target) {
          window.scrollTo({
            top: '60',
            behavior: 'smooth' // 可选，如果需要平滑滚动
          })
          target.scrollIntoView({
            behavior: 'smooth'
          })
        }
      }
    },
    changeCompanyType(index) {
      // 将全量数据根据type筛选存入sortList中
      if (index == '0') {
        this.sortList = pySort(this.companyList)
      } else {
        const newCompanyList = []
        this.companyList.some((item, i) => {
          if (item.companyType == index) {
            newCompanyList.push(item)
          }
        })
        this.sortList = pySort(newCompanyList)
      }
    },
    openPopup() {
      this.isShowH5Pop = true
    },
    handlePageShow(event) {
      console.log(event, 'handlePageShow')
      if (event.persisted && this.$route.path === '/enterpriseList') {
        // 用户从缓存中返回到首页
        console.log('用户已从缓存中返回到 H5 首页')
        // 在这里执行你需要的操作
        localStorage.removeItem('userCurrentCanteen')
      }
    },
    // 从设置页或其他APP跳转回到此页面
    handleVisibilityChange() {
      console.log(document.visibilityState)
      if (document.visibilityState === 'visible') {
        Toast.loading({
          duration: 0, // 持续展示 toast
          message: '处理中...'
        })
        const globalData = JSON.parse(localStorage.getItem('cityInfo'))
        console.log(globalData, 'globalData')
        if (globalData) {
          // 手动选择过 率先使用
          this.city = globalData.city
          this.cityCode = globalData.cityCode
          this.getCompanyList()
        } else {
          const _this = this
          window.AlipayJSBridge.call('location', {}, function(result) {
            const res = result
            console.log(res, 'res获取111')
            // 获取用户当前位置省市信息
            if (res.error) {
              // 申请后仍然失败
              localStorage.setItem('locationPermission', true)
              // 定位失败 添加默认城市缓存 避免下次进入仍然调取定位
              _this.city = '开启定位'
              _this.cityCode = '110100'
              _this.getCompanyList()
            } else {
              let cityCode = Number(res.adCode)
              cityCode = parseInt(cityCode / 100) * 100
              _this.city = res.city
              _this.cityCode = cityCode
              localStorage.removeItem('locationPermission')
              _this.getCompanyList()
            }
          })
        }
      } else {
        // onPagePause();
      }
    }
  },
  onHide() {
    if (window && window.AlipayJSBridge) {
      window.AlipayJSBridge.call('hideOptionMenu')
    } else {
      console.log('hideOptionMenu方法没有获取成功')
    }
  }
}
</script>
<style scoped lang="less">
page {
  height: 100%;
}

.enterprise-list {
  height: 100%;
  width: 100%;
  // padding: 0 8px;
  background-color: #fff;
}

.scroll-container {
  -webkit-overflow-scrolling: touch;
}

.scroll-container::-webkit-scrollbar {
  display: none;
  /* 隐藏滚动条 */
}

.search-header {
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.location {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.location-img {
  height: 40px;
  width: 40px;
  margin-right: 4px;
}

.location-city {
  color: #333333;
  font-size: 32px;
}

.search-content {
  flex: 3;
}

.list-alphabet {
  display: flex;
  flex-direction: column;
  justify-content: center;
  //设置字母表的位置在靠右，宽度，和距离顶部的距离
  position: fixed;
  right: 0;
  top: 430px;
  // bottom: 0;
  width: 50px;

  .item {
    // 设置字母居中和间距
    font-size: 26px;
    line-height: 28px;
    text-align: center;
    color: #909090;
  }
}

.list-header {
  line-height: 30px;
  background-color: #fff;
  color: #999999;
  margin-left: 10px;
  font-size: 16px;
}

.list-header1 {
  line-height: 30px;
  background-color: #fff;
  color: #999999;
  margin-left: 6px;
  margin-bottom: 10px;
  font-size: 30px;
}

.history-list {
  /* margin-left: 6px; */
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.history-item {
  /* background-color: #f1f1f1; */
  line-height: 30px;
  padding: 15px 30px;
  border-radius: 40px;
  margin: 10px 6px;
  border: #c4c4c4 0.5px solid;
  max-width: 620rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.am-list-header {
  /* background-color: #f7f7f7; */
  margin-top: 10px;
}

.address-item {
  min-height: 98rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #f1f1f1;
  padding: 0 32rpx;
}

.item-title {
  width: 140rpx;
  color: #4d4c4c;
  font-size: 28rpx;
  height: 98rpx;
  line-height: 98rpx;
}

.item-content {
  width: 520rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 28rpx;
  height: 98rpx;
  line-height: 98rpx;
  color: #4d4c4c;
}

.am-tabs-bar {
  z-index: 999;
}

.am-tabs-bar-title {
  margin-right: var(--am-tabs-title-marginRight, 24px);
}

.am-tabs-bar-title__noMargin {
  margin-right: 0;
}

.list-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 260rpx;
}

/* 地区级联选择器 */

.picker-view {
  width: 100%;
  display: flex;
  background-color: #fff;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  bottom: 0rpx;
  left: 0rpx;
}

.picker-item {
  line-height: 70rpx;
  margin-left: 5rpx;
  margin-right: 5rpx;
  text-align: center;
}

.picker-view__pane {
  height: 100rpx;
  width: 100%;
  padding: 20rpx 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

.picker-view__pane text {
  font-size: 30rpx;
}

.pick-view__group {
  width: 96%;
  height: 480rpx;
}

.tab-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx;
  box-sizing: border-box;
  /* 如果 swipeable="{{true}}"，需要增加 height */
  /* height: 350px; */
  /* 为了体现 stickyBar 的作用而增加的 tab-content 的高度 */
  height: 50vh;
}

.dyt-list {
  margin-top: 0;
}

.dyt-list .am-list-item-thumb {
  border-radius: 5px;
}

.dyt-list .am-list-brief {
  color: #909090;
  font-size: 14px;
}

.am-list-sticky {
  position: sticky;
  top: 0;
  z-index: 2;
}

.am-popup-mask {
  z-index: 999;
}

.am-popup-bottom {
  z-index: 999;
}

.am-alphabet {
  z-index: 2021;
  right: 0.5%;
}

/* @media (max-height: 800px) {
  .am-alphabet {
    display: none;
  }
} */
.canteen-new-right-list-nav {
  width: 100%;
  height: 100px;
  box-sizing: border-box;
  padding: 0 10px;

  .right-nav-wrap {
    display: flex;
    overflow: hidden;
    overflow-x: auto;
    flex-shrink: 0;
    // position: absolute;
    border-bottom: 1px solid #f4f4f4;
    -webkit-overflow-scrolling: touch;

    .right-nav-wrap-list {
      position: relative;
      padding: 20px;
      box-sizing: border-box;
      flex-shrink: 0;

      span {
        width: 100%;
        color: #999999;
      }

      .right-nav-wrap-list-select {
        position: absolute;
        bottom: -3px;
        left: calc(25% - 5px);
        width: 55%;
        height: 8px;
        background-color: #02cb9f;
      }
    }
  }

  .right-nav-wrap::-webkit-scrollbar {
    display: none;
    /* 隐藏滚动条 */
  }
}

.city-list {
  padding: 10px 20px;
  font-size: 32px;
  line-height: 80px;

  .city-header {
    border-bottom: 1px solid #f4f4f4;
  }

  .city-item {
    border-bottom: 1px solid #f4f4f4;
  }
}

@media only screen and (min-width: 700px) {
  /* 对于折叠屏，通常需要特定的样式来适配 */
  .canteen-new-right-list-nav {
    width: 100%;
    height: 100px;
    box-sizing: border-box;
    padding: 0 10px;

    .right-nav-wrap {
      display: flex;
      flex-shrink: 0;
      border-bottom: 1px solid #f4f4f4;
      overflow: hidden;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;

      .right-nav-wrap-list {
        position: relative;
        padding: 15px;
        box-sizing: border-box;
        flex-shrink: 0;

        span {
          width: 100%;
          color: #999999;
        }

        .right-nav-wrap-list-select {
          position: absolute;
          bottom: -3px;
          left: calc(25% - 5px);
          width: 55%;
          height: 8px;
          background-color: #02cb9f;
        }
      }
    }

    .right-nav-wrap::-webkit-scrollbar {
      display: none;
      /* 隐藏滚动条 */
    }
  }

  .city-list {
    padding: 10px;
    font-size: 32px;
    line-height: 70px;

    .city-header {
      border-bottom: 1px solid #f4f4f4;
    }

    .city-item {
      border-bottom: 1px solid #f4f4f4;
    }
  }

  .list-alphabet {
    display: flex;
    flex-direction: column;
    justify-content: center;
    //设置字母表的位置在靠右，宽度，和距离顶部的距离
    position: fixed;
    right: 0;
    top: 430px;
    // bottom: 0;
    width: 50px;

    .item {
      // 设置字母居中和间距
      font-size: 26px;
      line-height: 28px;
      text-align: center;
      color: #909090;
    }
  }
}
</style>
